import React, { PureComponent } from "react";

class Home extends PureComponent {

  // 即将渲染获取一个时间beginTime
  UNSAFE_componentWillMount() {
    this.beginTime = Date.now()
  }

  // 渲染完成在获取一个使劲按endTime
  componentDidMount() {
    this.endTime = Date.now()
    const interval = this.endTime - this.beginTime
    console.log(`Home组件渲染时间:${interval}`);
  }

  render() {
    return <h2>Home</h2>
  }
}

class About extends PureComponent {

  // 即将渲染获取一个时间，beginTime
  UNSAFE_componentWillMount() {
    this.beginTime = Date.now()
  }

  // 渲染完成在获取一个使劲按endTime
  componentDidMount() {
    this.endTime = Date.now()
    const interval = this.endTime - this.beginTime
    console.log(`About组件渲染时间:${interval}`);
  }
  render() {
    return <h2>About</h2>
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
        <About />
      </div>
    )
  }
}